<!-- 饼图 -->
<template>
  <el-card>
    <template #header> 会员类型饼图下单量占比 </template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ChartTotalData } from "@/api/abso/orderTotal/model";

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
  chartDataList: {
    type: Array as PropType<ChartTotalData[]>,
    default: () => [],
  },
});

const seriesData = computed(() => {
  return props.chartDataList.map((item: ChartTotalData) => {
    return {
      name: item.user_type,
      value: item.counts,
    };
  });
});
const options = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  grid: {
    top: "2%",
    left: "2%",
    right: "2%",
    bottom: "5%",
    containLabel: true,
  },
  legend: {
    top: "bottom",
    textStyle: {
      color: "#999",
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: [45, 110],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 1,
        color: function (params: any) {
          //自定义颜色
          const colorList = [
            "#409EFF",
            "#67C23A",
            "#E6A23C",
            "#F56C6C",
            "#0078d2",
            "#f11360",
          ];
          return colorList[params.dataIndex];
        },
      },
      label: {
        show: true,
        position: "outside", // 标签位置设置为扇区外部
        formatter: function (params: { name: string; value: string }) {
          // 在name后面显示数值
          return `${params.name}: ${params.value}/单`;
        },
      },
      labelLine: {
        show: true, // 显示连接线
      },
      data: seriesData.value,
    },
  ],
};

const chart = ref<any>("");

onMounted(() => {
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>
